<template>
  <div class="home">
    <div class="container">
      <h1>今日事今日毕,勿将今事待明日</h1>
      <TodoInput />
      <TodoList />
    </div>
  </div>
</template>

<script>
import TodoInput from './input'
import TodoList from './todoList'

export default {
  name: 'Home',
  components: {
    TodoInput,
    TodoList,
  },
}
</script>
<style scoped lang='less'>
h1 {
  text-align: center;
  padding-top: 20px;
  color: whitesmoke;
  margin-bottom: 20px;
}
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  user-select: none;
  .container {
    display: flex;
    flex-direction: column;
    width: 1400px;
    zoom: 1;
    transition: all ease 0.38s;
    transform-origin: 50% 50%;
    align-items: center;
    justify-content: center;
  }
}
.addBtn {
  margin-left: 20px;
}
.container {
  margin: auto;
}
</style>
